<template>
    <component is="a-modal" v-model:visible="visible" width="70%" :title="title" :mask-closable="false"
        :ok-loading="loading" @cancel="close" @before-ok="submit">
        <div style="margin: 20px 0;margin-left: 20px;">
            <pre>通过审核：指单独通过了人脸审核这一关，审核通过后仍需前往对应的资讯列表进行最终审核</pre>
            <pre>通过不审核：指人脸审核未通过，在具体的资讯列表页面中状态会更新为审核不通过</pre>
        </div>
        <div class="photoList">
            <div class="photo" v-if="paramsData?.face_url">
                <span>本次人脸检测</span>
                <a-image class="img" :src="paramsData?.face_url"></a-image>
            </div>
            <div class="photo" v-if="paramsData?.faceUrlTemp">
                <span>人脸模版图</span>
                <a-image class="img" :src="paramsData?.faceUrlTemp"></a-image>
            </div>
            <div class="photo" v-if="paramsData?.user_face_url">
                <span>证件正面照</span>
                <a-image class="img" :src="paramsData?.user_face_url"></a-image>
            </div>
            <div class="photo" v-if="paramsData?.helper_card_image">
                <span>冠名身份证图片</span>
                <a-image class="img" :src="paramsData?.helper_card_image"></a-image>
            </div>
        </div>
        <a-form ref="formRef" :model="formData" :rules="rules" :auto-label-width="true" style="margin-top: 30px;">
           
                <a-form-item label="审核操作" field="state">
                    <sa-radio @change="getChange" v-model="formData.state" :data="STATE"></sa-radio>
                </a-form-item>
                <a-form-item label="审核备注" field="message" v-if="formData.state==2">
                    <a-input v-model="formData.message" placeholder="请填写对应国籍语言文字" />
                </a-form-item>
                <a-form-item label="操作密码" field="admin_pay_password">
                    <a-input-password v-model="formData.admin_pay_password" placeholder="请输入" />
                </a-form-item>
                <a-form-item label="谷歌验证码" field="google_code">
                    <a-input v-model="formData.google_code" placeholder="请输入" />
                </a-form-item>
        </a-form>
    </component>
</template>

<script setup>
import { ref, reactive, computed, watch } from 'vue'
import { Message } from '@arco-design/web-vue'
import SaRadio from '@cps/sa-radio/index.vue'
import memberApi from '@/api/system/member'
import ENUMS from '@/utils/enums'
import { throttle } from 'lodash'
const paramsData = ref({})
// 获取角色组列表
const getParams = async (id, type) => {
    const { data } = await memberApi.check_params(id, type)
    paramsData.value = { ...data.info }
    console.log('1', paramsData.value);
}
const emit = defineEmits(['success'])
// 引用定义
const formRef = ref()
const mode = ref('')
const visible = ref(false)
const loading = ref(false)
const roleData = ref([])

let title = computed(() => {
    return (mode.value == 'detail' ? '详情' : '审核')
})
const STATE = [
    { value:-3, title: '待审核' },
    { value: 0, title: '通过审核' },
    { value: 2, title: '不通过审核' },
]
// 表单信息
const formData = reactive({
    state: -3,
    message:'',
    admin_pay_password: '',
    google_code: '',
    type:'',
    id: ''
})

// 验证规则
const rules = ref({
    message: [{ required: true, message: '请输入' }],
    admin_pay_password: [{ required: true, message: '请输入' }],
    google_code: [{ required: true, message: '请输入' }],
    state: [{ required: true, message: '请选择' }],

});
// 打开弹框
const open = async (id, type) => {
    paramsData.value = {}
    mode.value = type
    visible.value = true
    formRef.value.resetFields()
    await initPage()
    await getParams(id, type)
    formData.type=type
    formData.id=id

}
const getChange = () => {
    formData.return_cost = null
}

// 初始化页面数据
const initPage = async () => {
}

// 数据保存
const submit =async (done) => {
        const validate = await formRef.value?.validate()
        if (!validate) {
            loading.value = true
            try {
                let data = { ...formData }
                let result = await memberApi.check_face_type(data)
                if (result.code === 200) {
                    Message.success('操作成功')
                    emit('success')
                    visible.value = false
                    done(true)
                }
                // 防止连续点击提交
                setTimeout(() => {
                    loading.value = false
                }, 500)
            } catch {
                loading.value = false
            }
        }
        done(false)
    }

// 关闭弹窗
const close = () => (visible.value = false)

defineExpose({ open })
</script>
<style lang="less" scoped>
.photoList {
    width: 100%;
    max-height: 200px;
    display: flex;
    align-items: center;
    margin-top: 20px;
    margin-left: 40px;
    // justify-content: center;

    .photo {
        width: 180px;
        height: 180px;
        text-align: center;
        color: #5c7cfa;
        border: 1px solid #d9d9d9;
        display: flex;
        justify-content: center;
        flex-direction: column;
        align-items: center;
        border-radius: 4px;
        margin-right: 100px;

        .img {
            margin-top: 15px;
            width:100px;
            max-height: 120px;
        }
    }
}
</style>
